<template>
  <div>
    <div class="nav">
      <div class="w">
        <div class="user-info">
            <span class="user not-login">
                <span><router-link to="/" class="link">商城首页</router-link></span>
              <span class="link js-login" v-if="username != null && username != ''">
                <span >欢迎：{{username}}</span>
                   <span class="link js-logout" @click="logout">退出</span>
                </span>
                <span class="link js-login" v-else>
                  <router-link to="/login" class="link js-register" >请登录</router-link>
                </span>
              <span class="link js-register"  v-if="username == null"@click="register" >注册 </span>
            </span>
        </div>
        <ul class="nav-list">
          <li class="nav-item">
            <router-link class="link" to="/cart">
              <i class="fa fa-shopping-cart"></i>
              购物车(<span class="cart-count"></span>)
            </router-link>
          </li>
          <li class="nav-item">
            <router-link class="link" to="/orderList">我的订单</router-link>
          </li>
          <li class="nav-item">
            <router-link class="link" to="/userCenter">个人中心</router-link>
          </li>
          <li class="nav-item">
            <router-link class="link" to="/userCenter">关于睿购商城</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
  import VueEventBus from '../model/VueEventBus.js'
  export default {
    name: "Nav",
    data(){
      return{
        username:'',
      }
    },
    methods:{
      logout:function () {
        sessionStorage.removeItem('username');
        this.username = null;
        this.$router.push('/home')
      },
      register:function () {
        window.location.href = '/#/register';
      }
    },
    mounted() {
      this.username = sessionStorage.getItem('username');
      //在mounted生命周期回调方法中监听广播时间
      VueEventBus.$on('login-event',(data) => {
        //接受到广播的数据data之后，渲染导航条
        this.username = data;
      })
    }
  }
</script>

<style scoped >
  .nav{
    background: #eee;
    height: 30px;
    line-height: 30px;
  }
  .nav .user{
    float: left;
  }
  .nav .user.login{
    display: none;
  }
  .nav .user .link{
    margin-right: 5px;
  }
  .nav .nav-list{
    float: right;
  }

  .nav .nav-list .nav-item{
    display: inline-block;
    margin-left: 5px;
  }
</style>
